<template>
  <h1> -- Dplayer --</h1>
  <a-config-provider
      :theme="{
      components: {
        Radio: {
          colorPrimary: '#00b96b',
        },
      },
    }"
  >
    <a-radio>Radio</a-radio>
    <a-checkbox>Checkbox</a-checkbox>
    <a-button>Button</a-button>
  </a-config-provider>
  <button type="button" @click="playDp()">
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-play-circle-fill" viewBox="0 0 16 16">
      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"/>
    </svg>
  </button>
  <div id="dplayer" ref="dplayerRef" class="dplayer">
  </div>
</template>

<script setup>
import DPlayer from 'dplayer';
import {ref, onBeforeMount} from "vue";


let dp;

function initDp(videoUrl, picUrl='', danmuPoolId){
  try {
    return new DPlayer({
      container: document.getElementById('dplayer'),
      autoplay: true, //是否自动播放
      theme: "#f3cd52", //主题色
      loop: true, //视频是否循环播放
      lang: "zh-cn",
      screenshot: true, //是否开启截图
      hotkey: true, //是否开启热键
      preload: "auto", //视频是否预加载
      volume: 0.7, //默认音量
      mutex: true, //阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
      //logo: "https://img1.baidu.com/it/u=1379537947,3221253954&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501",//在左上角展示一个 logo
      video: {
        url: videoUrl,
        pic: picUrl,
        type: 'auto'
      },
      danmaku: {
        id: '6682a0db5fe1a40ba5d9a415',
        api: `http://127.0.0.1:10100/api/heaven-server/danmu/`,
        user: "PZZ",
        bottom: '15%',
        unlimited: true,
        speedRate: 0.5,
      }
    });
  } catch (e) {
    console.log(e)
  }
}

function playDp() {
  console.log('begin to play...')
  dp = initDp('http://47.110.68.137:9000/heavenmeta-bucket/bigfile/7/3/7397b30eec3f46a8631891abd51ba7f5/7397b30eec3f46a8631891abd51ba7f5.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=yIO29Nq1TryeWtzxtTBZ%2F20240707%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240707T141335Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=d9cb9de0dba80ae918197f98d509705c1f4a04bbd89ae3a013118dcf7ec9fab8')
  dp.play()
}

function sendDanmu(){
  const danmu = {
    text: inputDanmu.value,
    color: '#f10a35',
    type: 'right', // should be `top` `bottom` or `right`
  }
  dp.danmaku.send( danmu, function (res) {
        console.log(res);
        console.log(dp.danmaku.draw(danmu))
      }
  );
}

onBeforeMount(_ => {
  console.log(`current env: ${JSON.stringify(import.meta.env)}`)
})
</script>

<style src="~/css/DPlayer.min.css"></style>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
